{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% load gross from prices_i18n %}
{% load discount_amount_for from prices %}
{% load status %}
{% load bootstrap_form from bootstrap3 %}

{% block title %}{% trans "Your profile" context "User profile page title" %} — {{ block.super }}{% endblock %}

{% block breadcrumb %}
  <ul class="breadcrumbs list-unstyled">
    <li><a href="/">
        {% trans "Home" context "Main navigation item" %}
    </a></li>
    <li>{% trans "Your account" context "Main navigation item" %} (<b>{{ user }}</b>)</li>
  </ul>
{% endblock breadcrumb %}

{% block content %}
  <div class="userprofile">
    <div class="userprofile__nav container">
      <h2>{% trans "My account" %}</h2>
      <ul class="nav nav-tabs col-lg-10 offset-lg-1" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#orders" role="tab"><h3>
            {% trans "Recent Orders" context "User profile tab" %}
          </h3></a>
        </li>
        {% if user.password %}
        <li class="nav-item">
          <a class="nav-link " data-toggle="tab" href="#password" role="tab"><h3>
            {% trans "Change password" context "User profile tab" %}
          </h3></a>
        </li>
        {% endif %}
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#addresses" role="tab"><h3>
            {% trans "Addresses book" context "User profile tab" %}
          </h3></a>
        </li>
      </ul>
    </div>
    <div class="tab-content col-lg-10 offset-lg-1">
      <div class="tab-pane active fade show" id="orders" role="tabpanel">
        <div id="accordion" role="tablist" aria-multiselectable="true">
          {% if orders|length %}
            <div class="table__header">
              <div class="row">
                <div class="col-md-2 col-3"><small>
                  {% trans "Order" context "Recent orders column title" %}
                </small></div>
                <div class="col-md-3 hidden-sm-down"><small>
                  {% trans "Date" context "Recent orders column title" %}
                </small></div>
                <div class="col-md-2 col-4 text-right"><small>
                  {% trans "Summary" context "Recent orders column title" %}
                </small></div>
                <div class="col-md-4 hidden-sm-down"><small>
                  {% trans "Status" context "Recent orders column title" %}
                </small></div>
                <div class="col-md-1 col-5"></div>
              </div>
            </div>
            {% for order in orders %}
              <div class="table__row">
                <div class="row">
                  <div class="col-md-2 col-3">
                    {{ order }}
                  </div>
                  <div class="col-md-3 hidden-sm-down">
                    {{ order.created }}
                  </div>
                  <div class="col-md-2 col-4">
                    <span class="float-right">{% gross order.get_total html=True %}</span>
                  </div>
                  <div class="col-md-4 hidden-sm-down">
                    {% render_status order.status order.get_status_display %}
                  </div>
                  <div class="col-md-1 col-5">
                    <a href="{{ order.get_absolute_url }}" class="float-right link--styled">
                      {% trans "Details" context "Recent orders link text" %}
                    </a>
                  </div>
                </div>
              </div>
            {% endfor %}
          {% else %}
            <h3 class="text-sm-center userprofile__orders-empty">
                {% trans "There are not any completed orders yet." context "No recent orders text" %}
            </h3>
          {% endif %}
        </div>
      </div>
      <div class="tab-pane fade" id="password" role="tabpanel">
        <div class="row ">
          <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3 userprofile__password">
            <form action="" method="post">
                {% csrf_token %}
                {% bootstrap_form change_password_form %}
                <input type="submit" class="btn primary narrow"
                       value="{% trans "Change password" context "User profile action" %}">
            </form>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="addresses" role="tabpanel">
        <div class="card-deck-wrapper userprofile__addresses">
          <div class="row card-deck">
              {% for address in addresses %}
                <div class="col-md-6">
                  <div class="card card-block">
                    {% include "userprofile/snippets/address-short.html" %}
                    <ul class="icons">
                      <li><a href="{% url "profile:address-edit" pk=address.pk %}">
                        {% trans "Edit" context "User address action" %}
                      </a></li>
                      <li><a class="delete-icon"><svg data-src="{% static "images/delete.svg" %}" height="20px" width="20px" /></a></li>
                    </ul>
                    {% include "userprofile/address-delete.html" with pk=address.pk %}
                  </div>
                </div>
              {% endfor %}
            </div>
            {% if addresses|length == 0 %}
              <h3 class="text-sm-center">
                  {% trans "You will see new addresses here after first successful checkout." context "No addresses text" %}
              </h3>
            {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock content %}

